<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智慧学生卡</title>
    <link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/css/bootstrapValidator.css" type="text/css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js" type="text/javascript"></script>
    <script src="/js/respond.min.js" type="text/javascript"></script>
    <![endif]-->

    <style>
        body{
            padding-top:50px;
            background-color:#F0F0F0;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <form class="form-horizontal" id="modify-form">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" name="username" value="" readonly="readonly">
                    </div>
                </div>
                <div class="form-group">
                    <label for="fullname" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="fullname" name="realname" placeholder="请输入您的姓名 例:张三" onkeydown="etotab(this)" onchange="check(this.id)">
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone" class="col-sm-2 control-label">手机号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="11位手机号码" onkeydown="etotab(this)" onchange="check(this.id)">
                    </div>
                </div>
                <div class="form-group">
                    <label for="studentcard" class="col-sm-2 control-label">学生卡号</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" id="studentcard" name="imei" placeholder="" onkeydown="etotab(this)">
                    </div>
                </div>
                <div class="form-group">
                    <label for="studentname" class="col-sm-2 control-label">学生姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="studentname" name="stuname" placeholder="请输入您子女的姓名 例:张四" onkeydown="etotab(this)" onchange="check(this.id)">
                    </div>
                </div>
                <div class="form-group">
                    <label for="sex" class="col-sm-2 control-label">学生性别</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" list="sexlist" id="sex" name="sex" placeholder="男/女" onkeydown="etotab(this)">
                        <datalist id="sexlist">
                            <option>男</option>
                            <option>女</option>
                        </datalist>
                    </div>
                </div>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">学生生日</label>
                    <div class="col-sm-10">
                        <input type="date" class="form-control" id="date" name="birthday" onkeydown="etotab(this)">
                    </div>
                </div>
                <div class="form-group">
                    <label for="school" class="col-sm-2 control-label">学生所在学校</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" list="schoolList" id="school" name="school" placeholder="xxx学校" onkeydown="etotab(this)">
                        <datalist id="schoolList">
                        </datalist>
                    </div>
                </div>
                <div class="form-group">
                    <label for="grade" class="col-sm-2 control-label">年级、班级</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="grade" name="stugrade" placeholder="例:初2021级02班" onkeydown="etotab(this)">
                    </div>
                </div>
                <div class="form-group">
                    <label for="type" class="col-sm-2 control-label">类型</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" list="typelist" id="type" name="stutype" placeholder="走读/住校" onkeydown="pbhcsj()">
                        <datalist id="typelist">
                            <option>走读</option>
                            <option>住校</option>
                        </datalist>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10 text-right">
                        <button type="button" class="btn btn-primary" id="modify-form-modify" onclick="submission()">提交</button>
                        <button type="button" class="btn btn-warning" id="modify-form-cancer" onclick="cancer()">取消</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3"></div>
    </div>

<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/bootstrapValidator.js" type="text/javascript"></script>
<script type="text/javascript" language=JavaScript charset="UTF-8">

    //个人信息
    var fullinformation;

    //得到数据
    if(sessionStorage['fullinf'] != null && typeof sessionStorage['fullinf'] != "undefined" && sessionStorage['fullinf'] != ""){
        //处理数据,将json字符串转成json对象
        fullinformation = JSON.parse(sessionStorage['fullinf']);
        document.getElementById("username").value = fullinformation.data.username;
        document.getElementById("fullname").value = fullinformation.data.realname;
        document.getElementById("phone").value = fullinformation.data.phone;
        document.getElementById("studentcard").value = fullinformation.data.student.imei;
        document.getElementById("studentname").value = fullinformation.data.student.stuname;
        document.getElementById("sex").value = fullinformation.data.student.stusex;
        document.getElementById("date").value = fullinformation.data.student.birthday;
        document.getElementById("school").value = fullinformation.data.student.sch.schid;
        document.getElementById("grade").value = fullinformation.data.student.stuclass;
        document.getElementById("type").value = fullinformation.data.student.type;
    }

    //ajaxform提交
    function submission(){
        if(emptyCheck()){
            alert("请输入完整信息");
            return;
        }
        $.ajax({
            type:"post",
            url:"/modify",
            data:$('#modify-form').serialize(),
            async:false,
            success:function (data) {
                var backMsg = JSON.parse(data);
                if(backMsg.code == 0){
                    alert(backMsg.msg);
                    window.location.href = "/index";
                }else{
                    alert(backMsg.msg);
                }
            },
            error:function () {
                alert("提交请求失败");
            }
        });
    }

    //取消提交
    function cancer(){
        window.location.href="/index";
    }

    //动态加载shool列表
    $.ajax({
        type:"post",
        url:"/schoolList",
        data:{},
        async:false,
        success:function (data) {
            var schoollist = JSON.parse(data);
            var schEle = document.getElementById("schoolList");
            for(i=0;i<schoollist.data.length;i++){
                var option = document.createElement("option");
                option.setAttribute("value",schoollist.data[i].schid);
                option.innerHTML=schoollist.data[i].schname;
                schEle.appendChild(option);
            }
        },
        error:function () {

        }
    });

    //屏蔽回车事件
    function pbhcsj(){
        var e = window.event;
        if(e.keyCode == 13){
            submission();
            e.preventDefault();
        }
    }

    <!-- 回车事件 -->
    function etotab(obj){
        var e = window.event;
        var form = document.getElementById("modify-form");
        var tagElements = form.getElementsByTagName('input');
        if(e.keyCode == 13){
            for(var i=0;i<tagElements.length;i++){
                if(obj.id == tagElements[i].id){
                    $("#"+tagElements[i+1].id).focus();
                    break;
                }
            }
            e.preventDefault();
        }
    }

    //验证姓名
    function isfullname(str){
        var reg=/^[\u4E00-\u9FA5]{2,8}$/;   //2-8位的汉字
        return reg.test(str);
    }
    //验证密码
    function ispassword(str){
        //var reg=/^[a-zA-Z0-9]{8,16}$/;   //8-16位字母或数字
        var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;   //8-16位字母和数字
        return reg.test(str);
    }
    //手机号验证
    function isphone(str){
        var reg=/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
        return reg.test(str);
    }

    function check(id){
        var x;
        if(id.search("fullname") != -1 || id.search("studentname") != -1){
            x = isfullname(document.getElementById(id).value);
        }
        if(id.search("password") != -1){
            x = ispassword(document.getElementById(id).value);
        }
        if(id.search("phone") != -1){
            x = isphone(document.getElementById(id).value);
        }
        if(!x){
            document.getElementById(id).value=null;
        }
    }

    //数据是否存在为空
    function emptyCheck(){
        var form = document.getElementById("modify-form");
        var tagElements = form.getElementsByTagName('input');
        var str;
        for(var i=0;i<tagElements.length;i++){
            str = $("#"+tagElements[i].id).val();
            if(str == null || str == "" || typeof str == "undefined"){
                return true;
            }
        }
    }

</script>
</body>
</html>
